<template>
  <div id="advert" class="main-box">
    <TableSearch :model="params">
      <template>
        <el-form-item :label="`${$t('广告名称')}：`" prop="title">
          <el-input v-model="params.title" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">
            {{ $t('搜索') }}
          </el-button>
          <el-button @click="reset()">{{ $t('重置') }}</el-button>
        </el-form-item>
      </template>
      <template #btn>
        <el-button type="primary" icon="el-icon-plus" @click="goAdd">
          {{ $t('添加') }}
        </el-button>
      </template>
    </TableSearch>
    <BaseTable
      :request="request"
      :params.sync="params"
      :is-request="false"
      ref="baseTable"
    >
      <el-table-column label="ID" prop="id" width="80" />
      <el-table-column
        :label="$t('广告名称')"
        prop="title"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('广告链接')"
        prop="url"
        show-overflow-tooltip
      />
      <el-table-column :label="$t('广告形式')" prop="type" width="120px">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 1">{{ $t('文字') }}</span>
          <span v-if="scope.row.type == 2">{{ $t('图片') }}</span>
          <span v-if="scope.row.type == 3">{{ $t('视频') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('尺寸')" prop="size" width="180px" />
      <el-table-column
        :label="$t('有效期')"
        prop="expiration_date"
        width="180px"
      />
      <el-table-column
        :label="$t('操作')"
        width="100px"
        fixed="right"
        align="right"
      >
        <template slot-scope="scope">
          <EditBtn @click="editor(scope.row)" />
          <DelBtn
            @success="del(scope.row)"
            :confirm-content="$t('删除该广告')"
          />
        </template>
      </el-table-column>
    </BaseTable>
    <BaseDialog
      :title="addForm.id ? $t('编辑') : $t('添加')"
      :dialog-show.sync="dialogShow"
      width="50%"
      footer
      @submit="submit"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="rules"
        label-position="top"
      >
        <!-- <el-form-item label="选择站点" prop="website_id">
          <el-select v-model="addForm.website_id" placeholder="请选择站点" @change="chooseWedsite">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.domain"
              :value="item.id"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item :label="$t('广告形式')" prop="type">
          <el-radio-group v-model="addForm.type" @change="chooseType">
            <el-radio :label="1">{{ $t('文字') }}</el-radio>
            <el-radio :label="2">{{ $t('图片') }}</el-radio>
            <el-radio :label="3">{{ $t('视频') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('广告名称')" prop="title">
          <el-input v-model="addForm.title" />
        </el-form-item>
        <el-form-item :label="$t('广告链接')" prop="url">
          <el-input v-model="addForm.url" :placeholder="$t('广告链接提示')" />
        </el-form-item>
        <el-form-item
          v-if="addForm.type == 1"
          :label="$t('广告内容')"
          prop="content"
        >
          <el-input v-model="addForm.content" type="textarea" />
        </el-form-item>
        <el-form-item :label="$t('有效期')" prop="expiration_date">
          <el-date-picker
            v-model="addForm.expiration_date"
            type="date"
            :placeholder="$t('请选择日期')"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
          />
        </el-form-item>
        <Attachment
          ref="attachment"
          :dialog-show.sync="dialogShow2"
          :attachment-type="attachmentType"
          @func="getData"
        />
        <div v-if="addForm.type == 2 || addForm.type == 3">
          <el-form-item :label="$t('广告尺寸')" prop="size">
            <el-input v-model="addForm.size" placeholder="例如：300X200" />
          </el-form-item>
          <el-form-item
            v-if="addForm.type == 2"
            size="small"
            :label="$t('广告图片')"
            prop="attachment_id"
          >
            <div class="attachment_imgBox" @click="openList('image')">
              <img
                v-if="addForm.attachment_id"
                :src="imageUrl"
                class="attachmentImg"
              />
              <i v-else class="el-icon-camera" />
            </div>
          </el-form-item>
          <el-form-item
            v-if="addForm.type == 3"
            :label="$t('广告视频')"
            prop="attachment_id"
          >
            <div class="attachment_imgBox" @click="openList('video')">
              <div v-if="addForm.attachment_id">
                <i class="el-icon-video-camera-solid" />
                <p class="videoName">{{ videoName }}</p>
              </div>
              <i v-else class="el-icon-video-camera" />
            </div>
          </el-form-item>
        </div>
      </el-form>
    </BaseDialog>
  </div>
</template>
<script>
import advertApi from '@/api/market/advert.js'
import websiteApi from '@/api/website.js'
export default {
  data() {
    return {
      request: advertApi.advertList,
      params: {
        title: ''
      },
      dialogShow2: false,
      imageUrl: '',
      videoUrl: '',
      videoName: '',
      orderData: [], //
      dialogShow: false,
      options: [], // 站点下拉选项
      addForm: {
        type: 1
      },
      rules: {
        // website_id: [
        //   { required: 'true', message: this.$t('请选择站点'), trigger: 'change' }
        // ],
        title: [
          {
            required: 'true',
            message: this.$t('请输入广告的名称'),
            trigger: 'blur'
          }
        ],
        url: [
          {
            required: 'true',
            message: this.$t('请输入广告链接'),
            trigger: 'blur'
          }
        ],
        content: [
          {
            required: 'true',
            message: this.$t('请输入广告内容'),
            trigger: 'blur'
          }
        ],
        size: [
          {
            required: 'true',
            message: this.$t('请输入广告尺寸'),
            trigger: 'blur'
          }
        ],
        attachment_id: [
          { required: 'true', message: this.$t('请上传广告'), trigger: 'blur' }
        ],
        expiration_date: [
          {
            required: 'true',
            message: this.$t('请输入广告有效期'),
            trigger: 'blur'
          }
        ]
      },

      id: '',
      loading: true,
      attachmentType: '', // 附件分类
      uploadType: '' // 上传类型
    }
  },
  created() {
    this.getWebsiteList()
  },
  mounted() {
    this.getList()
  },
  methods: {
    getData(data) {
      if (data.length > 1) {
        this.$message.error(this.$t('最多只能选择一张图片'))
      } else {
        if (this.uploadType == 'image') {
          this.addForm.attachment_id = data[0].id
          this.imageUrl = data[0].url
        } else if (this.uploadType == 'video') {
          this.addForm.attachment_id = data[0].id
          this.videoUrl = data[0].url
          this.videoName = data[0].name
        }
        this.dialogShow2 = false
      }
    },

    // 打开附件弹窗
    openList(val) {
      this.attachmentType = this.addForm.type
      this.dialogShow2 = true
      // console.log(this.addForm.type, this.dialogShow2)
      // return
      this.$nextTick(() => {
        this.$refs.attachment.getAttachmentList()
        // this.$refs.attachment.$refs.AttachmentCate.getCateList(0)
      })

      this.uploadType = val
    },

    // 获取站点列表
    getWebsiteList() {
      websiteApi.websiteList().then(res => {
        this.options = res.data
      })
    },
    // 选择站点
    chooseWedsite(val) {
      this.$forceUpdate()
    },
    chooseType(val) {
      if (!this.addForm.id) {
        if (this.addForm.type == 1) {
          this.addForm = {
            type: val,
            title: '',
            url: '',
            content: '',
            expiration_date: ''
          }
        } else if (this.addForm.type == 2 || this.addForm.type == 3) {
          this.addForm = {
            type: val,
            title: '',
            url: '',
            expiration_date: '',
            size: '',
            attachment_id: ''
          }
        }
      }
    },
    // 新增
    goAdd() {
      this.addForm = {
        id: '',
        type: 1,
        title: '',
        url: '',
        content: '',
        expiration_date: ''
      }
      this.dialogShow = true
    },
    // 编辑 获取广告详情
    editor(val) {
      advertApi.advertInfo({ id: val.id }).then(res => {
        if (res.code == 0) {
          if (res.data.type == 1) {
            this.addForm = {
              id: res.data.id,
              type: res.data.type,
              title: res.data.title,
              url: res.data.url,
              content: res.data.content,
              expiration_date: res.data.expiration_date
            }
          } else if (res.data.type == 2 || res.data.type == 3) {
            if (res.data.type == 2) {
              this.imageUrl = res.data.attachment.url
            }
            this.addForm = {
              id: res.data.id,
              type: res.data.type,
              title: res.data.title,
              url: res.data.url,
              attachment_id: res.data.attachment_id,
              expiration_date: res.data.expiration_date,
              size: res.data.size
            }
          }
        }
        this.dialogShow = true
      })
    },
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (!this.addForm.id) {
            advertApi.advertSave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList('search')
              }
            })
          } else {
            advertApi.advertUpdate({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList()
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },

    // 删除
    del(row) {
      advertApi.advertDelete({ id: row.id }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.getList()
        }
      })
    },
    search() {
      this.getList('search')
    },
    reset() {
      this.params.title = ''
      this.getList('search')
    },
    // 列表
    getList(type) {
      this.$refs.baseTable.getList(type)
    }
  }
}
</script>
<style lang="scss">
.attachment .el-dialog {
  .el-dialog__body {
    height: 600px;
  }
}
</style>
<style scoped lang="scss">
.main-box {
  padding: 0 16px;
}
#advert {
  .el-date-editor.el-input {
    width: 100%;
  }
}

.attachment_imgBox {
  .videoName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }
}
</style>
